/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View, Dimensions } from 'react-native';
import { Icon } from 'antd-mobile-rn';
// import SplashScreen from 'react-native-splash-screen';
import { WebView } from "react-native-webview";

// project
import {
    CAround, CBetween, Center, Column, CHand, CItemX, CItemY, CLine, CRow, CWrap, 
    CIcon, CImage, CSvg, CText,
    CContent, CFloat, CFooter, CHeader, CPage, CSide, 
    CEmpty, CError, CFail, CSkeleton, 
    CLabel, CButton
} from '../../library/comp';

import Licon from '../../library/comp/project/icon';


/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Article extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
    constructor(props) {
        super(props);

        /**
         * state
         */
        this.state = {

        };
    }

    /*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
    render() {
        return (
            <CPage>
                {/* 此页面背景色为白色 */}


                <CContent bg='#fff'>

                    {/* title star */}
                    <CRow mt='96' pa='30'>
                        <CText size='40' color='#454545' style={{fontWeight:'bold'}}>1234一年大小节不断，一年大小节不断，一年大小节不断，一年大小节不断</CText>
                    </CRow>

                    {/* title end */}
                    {/* 发布者信息 star */}
                    <CRow mb='40' px='30'>
                        <CHand active={1}><CText color='#556b9b' mr='10'>和社区</CText></CHand>
                        <CText color='#bebebe'>5天前</CText>
                    </CRow>
                    {/* 发布者信息 end */}

                    {/* 正文内容 star */}
                    <View>
                        
                    </View>
                    {/* 正文内容 end */}

                    {/* 阅读统计 star */}
                    <CBetween pa='30 30' pb='40'>
                        <CText color='#b8b8b8' size='26' blod>阅读 111194</CText>
                        <CHand>
                            <CIcon color="#6c799f" width="20" height="20" icon={ Licon["article-goods"] }></CIcon>
                            <CText color='#6c799f' size='26' bold>赞</CText>
                        </CHand>
                    </CBetween>
                    {/* 阅读统计 end */}

                    {/* 广告 star */}
                    <View style={{backgroundColor:'#f2f2f2',paddingLeft:15,paddingRight:15}}>
                        <CBetween py='20' y='center'>
                            <CHand h='1' f='1' bg='#ebebeb'></CHand>
                            <CHand df x='center' y='center'>
                                <CText color='#878787'>广告</CText>
                                <Icon type='down' size='xxs' color='#cbcbcb'></Icon>
                            </CHand>
                            <CHand h='2' f='1' bg='#ebebeb'></CHand>
                        </CBetween>
                        <CRow bg='#fff' h='210' mb='40'>
                            <CHand bg='#000' x='left' y='center' w='440' h='210' df>
                                <CImage source={{uri:"https://wx4.sinaimg.cn/mw690/6909cd6dly1fp3jzs0r7rj20m80m8ww6.jpg"}} w='440' h='210'  resizeMode='cover' style={{backgroundColor:'#efeff4'}}></CImage>
                            </CHand>
                            <CItemY f='1' pa='16 20' style={{justifyContent:'space-between',alignItems:'center'}}>
                                <CHand w='80' h='80' ra='80' oh>
                                    <CImage source={{uri:"https://wx4.sinaimg.cn/mw690/6909cd6dly1fp3jzs0r7rj20m80m8ww6.jpg"}} w='80' h='80' ra='80' resizeMode='cover' style={{backgroundColor:'#efeff4'}}></CImage>
                                </CHand>
                                <CText size='20' color='#939393'>精致旧物……</CText>
						        <CHand ba='2 #58be5a' color='#58be5a' bg='#fff' py='2' w='80' ra='10' x="center">
                                    <CText size='22' color="58be5a">关注</CText>
                                </CHand>
                            </CItemY>
                        </CRow>
                    </View>
                    {/* 广告 end */}

                </CContent>

                {/* 顶部 star */}
                <CHeader h='96' y='center' bg='#fff'>
                    <CBetween px='20'>
                        <CHand onPress={(e)=> {
                            this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </CHand>

                        <CText size='34'>精选推荐</CText>
                        <CHand w='44' h='44'></CHand>
                    </CBetween>
                </CHeader>
                {/* 顶部 star */}
                
            </CPage>
        )
    }
}
